<template>
	<popup 
	ref='popup' 
	type='bottom' 
	radius='6' 
	width='750' 
	height='838' 
	centerAnim='slide-up' 
	:showCloseIcon='true'
	:maskClickClose='false' 
	:duration='300'>
		<scroll-view scroll-y="true" class="scrollBox">
			<view class=" d-flex flex-d px-30 ">
				<view class="item py-30 mb-30 d-flex aling-centen position-r" v-for="(item,index) in list" :key='index'>
					<image :src="require('../static/shoop_cardRed.png')" class="item-bg w-100 h-100" mode=""></image>
					<view class="d-flex flex-d aling-centen jfy-center leftBox">
						<view class="">
							<text class="font-26">{{item.money_type==1?'￥':'折'}}</text>
							<text class="font-34">{{item.money_type==1?item.money:item.min_amount}}</text>
						</view>
						<text class="font-26">{{ item.money_type | coupType}}</text>
					</view>
					<view class="rightBox">
						<text v-if="item.money>0">满{{item.money}}元可使用</text>
						<text>无门槛</text>
						<view class="font-24 mt-10">
							<text>有效期:</text>
							<text class="time" v-if="item.use_time>0">{{$tool.time(item.addtime*1000,'YMDH')}}--{{$tool.time(item.use_time*1000,'YMDH')}}</text>
							<text class="time" v-else>不限时间</text>
						</view>
						<view class="d-flex aling-centen mt-10" @tap='submit(item)'>
							<text class="font-26" style="color:#FC3444;">立即使用</text>
							<view class="right d-flex-yCenter jfy-center ml-20">
								<u-icon name="arrow-right" color="#fff" size="16"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</popup>
</template>

<script>
	import popup from '@/components/wyb-popup/wyb-popup.vue'
	export default {
		props:{
			list:{
				type:Array,
				default:[]
			}
		},
		watch:{
			list(){
				console.log(this.list,'list');
			}
		},
		components: {
			popup
		},
		filters:{
			coupType(e){
				if(e==1)return '满减券'
				if(e==2)return '折扣券'
				return '异常状态'
			}
		},
		data() {
			return {

			}
		},
		methods: {
			show() {
				this.$refs.popup.show()
			},
			submit(e){
				this.$refs.popup.hide()
				this.$emit('use-coupon',e)
			}
		}
	}
</script>

<style lang="scss">
	.scrollBox{
		width: 100%;
		height: 838rpx;
		margin-top: 70rpx;
		.item{
			image{
				z-index: -1;
			}
			.leftBox{
				width: 172rpx;
				color: #fff;
			}
			.time{
				color: #999;
			}
			.right{
				width: 24rpx;
				height: 24rpx;
				background: #FC3444;
				border-radius: 50%;
			}
			.rightBox{
				margin-left: 50rpx;
			}
			height: 170rpx;
			.item-bg{
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
			}
		}
	}
</style>
